<template>
  <view class="container">
    <view v-if="isLoggedIn" class="member-info">
      <image src="/static/avatar.png" class="avatar"></image>
      <text class="name">{{ memberInfo.name || '会员用户' }}</text>
      <text class="phone">{{ memberInfo.phone }}</text>
      <view class="discount">
        <text>会员优惠：¥{{ memberInfo.member_discount || 500 }}</text>
      </view>
    </view>
    
    <view v-else class="login-tip">
      <text>登录后享受会员优惠</text>
      <button type="primary" @click="goLogin">立即登录</button>
    </view>
    
    <view class="menu">
      <view class="menu-item" v-if="isLoggedIn" @click="logout">
        <text>退出登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      memberInfo: {}
    }
  },
  
  onShow() {
    this.checkLogin()
  },
  
  methods: {
    checkLogin() {
      const token = uni.getStorageSync('token')
      this.isLoggedIn = !!token
      
      if (this.isLoggedIn) {
        const memberInfo = uni.getStorageSync('memberInfo')
        if (memberInfo) {
          this.memberInfo = memberInfo
        }
      }
    },
    
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('token')
            uni.removeStorageSync('memberInfo')
            uni.removeStorageSync('openid')
            this.isLoggedIn = false
            uni.showToast({ title: '已退出', icon: 'success' })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.member-info {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 30rpx;
  border-radius: 20rpx;
  color: white;
  text-align: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-bottom: 20rpx;
  border: 4rpx solid rgba(255,255,255,0.3);
}

.name {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.phone {
  display: block;
  font-size: 26rpx;
  opacity: 0.8;
  margin-bottom: 20rpx;
}

.discount {
  background: rgba(255,255,255,0.2);
  padding: 15rpx 30rpx;
  border-radius: 50rpx;
  display: inline-block;
}

.login-tip {
  background: white;
  padding: 60rpx 30rpx;
  border-radius: 20rpx;
  text-align: center;
  margin-bottom: 30rpx;
}

.login-tip text {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.menu {
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
}

.menu-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  text-align: center;
  font-size: 28rpx;
  color: #f00;
}

.menu-item:last-child {
  border-bottom: none;
}
</style>

